<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: {
    type: Object as () => NuxtError,
    default: () => ({})
  }
})

const router = useRouter()
const siteConfig = useSiteConfig()

const message = computed(() => {
  return props.error.statusCode === 404 ? '页面不存在' : props.error.message
})

useHead({
  title: `${props.error.statusCode} | ${siteConfig.siteName}`
})
</script>

<template>
  <div class="min-h-screen bg-gray-900 flex items-center justify-center px-4">
    <div class="text-center">
      <h1 class="text-9xl font-bold text-gray-700">
        {{ error.statusCode }}
      </h1>
      <p class="text-2xl font-semibold text-white mt-4">
        {{ message }}
      </p>
      <p class="text-gray-400 mt-4 mb-8">
        抱歉，您访问的页面不存在或发生了错误
      </p>
      <div class="flex items-center justify-center gap-4">
        <el-button type="primary" size="large" @click="navigateTo('/')">
          返回首页
        </el-button>
        <el-button size="large" @click="router.back()">
          返回上页
        </el-button>
      </div>
    </div>
  </div>
</template>